{% extends "../base.html" %}
{% block content %}
<div class="starter-template">
	<legend>
		{% if not plate.PlateID %}
			<ul class="nav nav-pills">
				<li class="active"><a data-toggle="tab" href="#upload-section">Upload</a></li>
				{% if os == "linux" %}
				<li><a data-toggle="tab" href="#usb-section">USB</a></li>
				{% endif %}
			</ul>
		{% else %}
			<translate>Edit Plate</translate> "{{plate.Path}}"
		{% endif %}		
	</legend>
	<form method="post" class="edit-page upload-disable" enctype="multipart/form-data">
		<div class="row flex-row">
			{% if not plate.PlateID %}
			<div class="col-md-4">
				<div class="tab-content">
					<div id="usb-section" class="tab-pane">
						<label for="file" translate>File</label>
						<select name="USBFile" id="file" class="form-control">
							<option value=""></option>
							{% for file in files %}
							<option value="{{file}}">{{file}}</option>
							{% endfor %}
						</select>
					</div>
					<div id="upload-section" class="tab-pane fade in active">
						<label for="ZipFile"><translate>File</translate> <span class="label label-default" translate>STL, OBJ, SLC, NSLICE, SVG, NanoDLP or Zip (PNG Files)</span></label>
						<input name="ZipFile" class="form-control" id="ZipFile" type="file" data-size="{{fileSizeLimit}}" data-remote="{{remoteSlicing}}" accept=".zip,.obj,.slc,.svg,.stl,.cws,.nanodlp,.nslice">
					</div>
				</div>
			</div>
			{% else %}
				<input type="hidden" name="USBFile" class="form-control" value="{{file}}">
			{% endif %}
			<div class="col-md-4">
				<label for="Path" translate>Name</label>
				<input value="{{plate.Path}}" name="Path" id="Path" class="form-control" required>
				<br>
			</div>
			<div class="col-md-4">
                {{ selectProfile(profiles,defaultProfile) }}
				<br>
			</div>
			<div class="col-md-12">
				<button class="btn btn-info" type="button" data-toggle="collapse" data-target=".advanced" aria-expanded="false" translate>Advanced Options</button>
				<br>
				<br>
			</div>
			<div class="col-md-4 collapse advanced">
				<label for="AutoCenter"><translate>Centering</translate>{{helpModal("auto-center")}}</label>
				<select name="AutoCenter" id="AutoCenter" class="form-control">
					<option value="0" {% if plate.AutoCenter==0 %}selected{% endif %} translate>Center Pieces</option>
					<option value="1" {% if plate.AutoCenter==1 %}selected{% endif %} translate>Center Origin</option>
					<option value="2" {% if plate.AutoCenter==2 %}selected{% endif %} translate>Disable</option>
				</select>
			</div>
			<div class="col-md-4 collapse advanced">
				<label for="MultiThickness"><translate>Multiple Thickness</translate> <span class="label label-default" translate>height:thickness,mm:micron</span>{{helpPage("https://docs.nano3dtech.com/manual/adaptive-thickness/#multiple-thickness")}}</label>
				<input name="MultiThickness" class="form-control" id="MultiThickness" value="{{ plate.MultiThickness }}" pattern="[\d.:,]*">
				<br>				
			</div>
			<div class="col-md-4 collapse advanced">
				<label for="MultiCure"><translate>Multiple Print</translate> <span class="label label-default" translate>Comma separated in second</span>{{helpPage("https://docs.nano3dtech.com/manual/multicure/")}}</label>
				<input name="MultiCure" class="form-control" id="MultiCure" value="{{ plate.MultiCure }}" pattern="[\d.,]*">
				<br>
			</div>
			<div class="col-md-4 collapse advanced">
					<label for="Offset"><translate>Offset Lowest Point for Slicing</translate> <span class="label label-default" translate>mm</span></label>
					<input name="Offset" class="form-control" id="Offset" type="number" step="0.01" value="{{ plate.Offset }}">
			</div>
			<div class="col-md-4 collapse advanced">
				<label for="StopLayers"><translate>Stop Layers</translate> <span class="label label-default" translate>Optional</span>{{helpModal("stop-layers")}}</label>
				<input value="{{plate.StopLayers}}" class="form-control" name="StopLayers" id="StopLayers" pattern="[\d,]*">
				<br>
			</div>
			<div class="col-md-4 collapse advanced">
				<label for="LowQualityLayerNumber"><translate>Number of Low Quality Layers</translate> <span class="label label-default" translate>Optional</span>{{helpModal("low-quality-layers")}}</label>
				<input class="form-control" value="{{plate.LowQualityLayerNumber}}" name="LowQualityLayerNumber" id="LowQualityLayerNumber" type="number">
				<br>
			</div>
			{% if not plate.PlateID && file=="" %}
				<div class="col-md-4 collapse advanced">
					<label for="MaskFile"><translate>Mask File (PNG)</translate> <span class="label label-default" translate>Optional, override global mask</span></label>
					<input name="MaskFile" class="form-control" id="MaskFile" type="file" accept=".png">
				</div>
				<div class="col-md-4 collapse advanced">
					<label for="MaskEffect"><translate>Decrease Mask Intensity</translate> <span class="label label-default" translate>Percentage</span></label>
					<input name="MaskEffect" class="form-control" id="MaskEffect" type="number" step="0.1" min="0" max="100" value="{{ plate.MaskEffect }}">
				</div>
			{% endif %}
			<div class="col-md-4 collapse advanced">
				<label for="ImageRotate" translate>Rotate Layers</label>
				<select class="form-control" name="ImageRotate" id="ImageRotate">
					<option value="0" {% if plate.ImageRotate==0 %}selected{% endif %} translate>Same as Profile</option>
					<option value="1" {% if plate.ImageRotate==1 %}selected{% endif %} translate>Do not Rotate</option>
					<option value="2" {% if plate.ImageRotate==2 %}selected{% endif %} translate>Rotate 90°</option>
				</select>
				<br>
			</div>
		</div>
		<br>
		<div class="progress hide">
			<div style="width: 0%" class="progress-bar progress-bar-main progress-bar-striped active progress-bar-warning"></div>
		</div>
		<button type="submit" class="btn btn-success upload-button"><translate>Submit</translate></button>
		<button type="button" class="btn btn-success" id="browser_slice" disabled="disabled" translate>Slice on Browser and Submit</button>
	</form>
	{% if isARM && !remoteSlicing %}
	<div class="row">
		<div class="col-md-12">
			<br>
			<br>
			<div class="alert alert-info" translate>To speedup slicing you can use, NanoDLP remote slicer feature or SLC format.</div>
		</div>
	</div>
	{% endif %}
	<br>
	<br>
	<div class="row hide" id="largeFile">
		<div class="col-md-12">
			<div class="alert alert-danger">
				<translate>File is too large to process, use remote slicing, web slicing or upload a sliced file.</translate>
				<translate>It is possible to process files smaller than {{fileSizeLimit}}MB.</translate>
			</div>
		</div>
	</div>	
	{% if remoteSlicing %}
	<div class="row">
		<div class="col-md-12">
			<br>
			<br>
			<div class="alert alert-success" translate>Remote slicing enabled.</div>
		</div>
	</div>
	<br>
	<br>
	{% endif %}
</div>
<script src='/static/js/wasm.js'></script>
{% endblock %}